<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>html</title>
  </head>
<style>
  .warp{
  display: flex;
  width: 245px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.item{
  width: 100%;
  height: 25px;
  border: 1px solid #ccc;

}
.mmm{
  transition: all 1s ;
}
</style>
  <body>
    <div id="app">
      <button @click="shuffle">随机</button>
      <transition-group tag="div" class="warp" move-class="mmm" > 
        <div v-for="(item,index) in list" :key="item.id"  class="item"> 
          {{ index }}
        </div>
      </transition-group>
    </div>

    <!-- <div id="app">{{ message }}</div> -->
  </body>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp, ref } = Vue
  
    createApp({
      setup() {
        const message = ref('Hello vue!')
        const list = ref(Array.apply(null,{length:5}).map((_,index)=>{
  return {
    id:index,
    // number:(index % 9) +1
    number:index
  }
}))
        const  shuffle = function() {
        for (let i = list.value.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [list.value[i], list.value[j]] = [list.value[j], list.value[i]];
        }
        return list.value;
      }
        return {
          message,list,shuffle
        }
      }
    }).mount('#app')
  </script>
</html>